// 显示弹框



// 数据增删改查

checkLogin()
logout()
const res = localStorage.getItem('name')
const list = document.querySelector('.list')
document.querySelector('.username').innerHTML = res
async function myl() {

    const { data } = await axios.get('/students')
    const total = document.querySelector('.total')
    total.innerHTML = data.length
    list.innerHTML = data.map(item => {

        return `
        <tr>
            <td>${item.name}</td>
            <td>${item.age}</td>
            <td>${item.gender ? '女' : '男'}</td>
            <td>第${item.group}组</td>
            <td>${item.hope_salary}</td>
            <td>${item.salary}</td>
            <td>${item.province + item.province + item.area}</td>
            <td>
            <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id = ${item.id}></i></a>
            <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id = ${item.id}></i></a>
            </td>
        </tr>
        `
    }).join('')
}
myl()
const openModal = document.querySelector('#openModal')
const modalDom = document.querySelector('#modal')
const modal = new bootstrap.Modal(modalDom)
const province = document.querySelector('[name="province"]')
const city = document.querySelector('[name="city"]')
const area = document.querySelector('[name="area"]')
let rowid
let a
let b
axios({
    url: '/api/province',
}).then(res => {
    const { list } = res
    province.innerHTML = '<option value="">--省份--</option>' + list.map(item => {
        return `
            <option value="${item}">--${item}--</option>
            `
    }).join('')
})
province.addEventListener('change', function () {
    area.innerHTML = '<option value="">--地区--</option>'
    a = province.value
    axios({
        url: '/api/city',
        params: {
            pname: a
        }

    }).then(res => {
        const { list } = res
        city.innerHTML = '<option value="">--城市--</option>' + list.map(item => {
            return `
            <option value="${item}">${item}</option>
            `
        })
    })
})
city.addEventListener('change', function () {

    b = city.value
    axios({
        url: '/api/area',
        params: {
            pname: a,
            cname: b
        }
    }).then(res => {
        const { list } = res
        area.innerHTML = '<option value="">--地区--</option>' + list.map(item => {
            return `
            <option value="${item}">${item}</option>
            `
        }).join('')
    })
})
area.addEventListener('change', function () {
})

openModal.addEventListener('click', function () {
    rowid = null
    modal.show()
})
const form = document.querySelector('#form')
const submit = document.querySelector('#submit')
submit.addEventListener('click', async function () {
    if (rowid) {
        const data = serialize(form, { hash: true, empty: true })
        // console.log(area.value);
        console.log(data);
        data.age = +data.age
        data.gender = +data.gender
        data.salary = +data.salary
        data.group = +data.group
        data.hope_salary = +data.hope_salary
        // console.log(data.area);
        const res = await axios.put(`/students/${rowid}`, data)
        myl()
        modal.hide()
        form.reset()
    } else {
        const data = serialize(form, { hash: true, empty: true })
        // console.log(area.value);
        console.log(data);
        data.age = +data.age
        data.gender = +data.gender
        data.salary = +data.salary
        data.group = +data.group
        data.hope_salary = +data.hope_salary
        // console.log(data.area);
        const res = await axios.post('/students', data)
        myl()
        showToast('添加成功')
        modal.hide()
        form.reset()
    }

})
const name = document.querySelector('[name="name"]')
const input = document.querySelector('.input')
const age = document.querySelector('[name="age"]')
const group = document.querySelector('[name="group"]')
const hope_salary = document.querySelector('[name="hope_salary"]')
const salary = document.querySelector('[name="salary"]')
const nan = document.querySelector('#cb01')
const nv = document.querySelector('#cb02')
list.addEventListener('click', async function (e) {
    if (e.target.classList.contains('bi-pen')) {
        rowid = e.target.dataset.id
        modal.show()
        const { data } = await axios.get(`/students/${rowid}`)
        // age.value = data.age
        // name.value = data.name
        if (data.gender) {
            nv.checked = true
        } else {
            nan.checked = true
        }
        // group.value = data.group
        // hope_salary.value = data.hope_salary
        // salary.value = data.salary

        province.value = data.province
        const { list: list1 } = await axios.get(`/api/city?pname=${data.province}`)
        console.log(res);

        city.innerHTML = '<option value="">--城市--</option>' + list1.map(item => {
            return `
            <option value="${item}">${item}</option>
            `
        }).join('')
        city.value = data.city
        const { list: list2 } = await axios.get(`/api/area?pname=${data.province}&cname=${data.city}`)
        area.innerHTML = '<option value="">--地区--</option>' + list2.map(item => {
            return `
            <option value="${item}">${item}</option>
            `
        }).join('')
        area.value = data.area
        const resArr = ['name', 'age', 'group', 'hope_salary', 'salary']
        resArr.forEach(item => {
            document.querySelector(`[name=${item}]`).value = data[item]
        })
    }
    if (e.target.classList.contains('bi-trash')) {

        const res1 = confirm('你确认要删除吗？')
        flag = e.target.dataset.id
        if (res1) {
            const res = await axios.delete(`/students/${flag}`)
            myl()
        }
    }
})

const title = document.querySelector('.modal-title')
//modal显示进行的操作
modalDom.addEventListener('show.bs.modal', event => {
    title.innerHTML = rowid ? '编辑学员' : '添加学员'
})




